<template>
  <div class="Details">
    <ul>
      <li v-for="(item,index) in details" :key="index" :id="item.id" >
        <p>{{item.name}}</p>
        <p>{{item.title}}</p>
        {{item.id}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name:'Details',
    data(){
      return{
        details:[]
      }
    },
    mounted(){
      this.getDate();
    },
    methods:{
       getDate(){
         let id = this.$route.query.id;
         this.details = [];
         console.log(id);
         this.$http('static/homeList.json')
         .then(res=>{
           console.log(res.data.homeList);
           let list = res.data.homeList.filter(o=>o.id == id);
           this.details.push(list[0]);
         })
       }
    },
    watch:{
      $route(to,from){
        // console.log(to);
        // console.log(from);
        this.getDate();
      }
    }

  }
</script>